<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小区关联街道|一家商城</title>
<link rel="stylesheet" href="$!webPath/resources/libs/remodal/remodal.css">
<link rel="stylesheet" href="$!webPath/resources/libs/remodal/remodal-default-theme.css">

<style type="text/css">
	/*
         处理中...
         <div class="photogrid-loader"><b></b><b></b><b></b></div>
         显示与否只需要$(".photogrid-loader").toggleClass("show-loader");
     */
	@keyframes photogrid-loaderFrames{ 50%{ height:5px; } }
	@-webkit-keyframes photogrid-loaderFrames{ 50%{ height:5px; } }
	.photogrid-loader{ visibility:hidden; opacity:0; pointer-events:none; -webkit-transform:scale(.2); transform:scale(.2); position:absolute; z-index:999999; top:50%; left:50%; margin:-50px 0 0 -50px; text-align:center; border-radius:100%!important; box-shadow:15px 32px 60px -20px #FFF inset, 1px 1px 3px 1px #FFF inset, 0 0 20px; width:100px; height:100px; transition:0.3s; }
	.photogrid-loader.dark-loader{background-color: rgba(2, 2, 2, 0.5); box-shadow: 15px 32px 60px -20px rgba(10, 10, 10, 0.5) inset, 1px 1px 3px 1px rgba(2, 2, 2, 0.3) inset, 0 0 20px;}
	.photogrid-loader.show-loader { visibility:visible; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
	.photogrid-loader b{ display:inline-block; vertical-align:middle; margin:0 2px; width:8px; height:60px; border-radius:5px; background:rgba(255,255,255,0.8); box-shadow:0 0 10px rgba(0,0,0,0.5); -webkit-animation:.9s photogrid-loaderFrames infinite linear; animation:.9s photogrid-loaderFrames infinite linear; }
	.photogrid-loader b:nth-child(2){ -webkit-animation-delay:.3s; animation-delay:.3s; }
	.photogrid-loader b:nth-child(3){ -webkit-animation-delay:.6s; animation-delay:.6s; }
	.photogrid-loader:before{ content:""; display:inline-block; height:100%; margin-right:-0.25em; vertical-align:middle;}
	
	
	.pn-ltbody tr:hover{
		background-color: #FFDB67!important;
	}
	table{
		border: 0 none;
		border-collapse: collapse;
		width:100%;
	}
	th,td{
		border:1px solid #DDDDDD;
		padding:2px 10px;
	}
	.newOrgName{
		width:200px;
		display:inline-block;
	}
	.newname{
		width:600px;
	}
	tr:hover{
		background-color:#f5f5f5;
	}
	.streetname{
		width:400px;
    	padding: 2px 10px;
	}
	#streetBox{
	    display: none;
	    border: 1px solid #3498E7;;
	    background-color: #ffffff;
	    overflow: auto;
    	padding: 10px;
	    max-height: 300px;
	    width: 400px;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 999;
	}
	#streetList{
		list-style:none;
	    padding-left: 0;
	    margin: 0;
	}
	#streetList li{
		border: 1px solid transparent;
	}
	#streetList li:hover{
		border: 1px solid red;	
		cursor: pointer;
	}
	.remodal-header h3{
		margin-top: 0;
	}
	.remodal-body {
		margin-bottom: 20px;
	}
	.remodal-body .field-main{
		text-align:left;
	}
	.remodal-confirm{
		padding:10px;
	}
</style>
</head>
<body>
 <h1>小区列表</h1>
 <p><input type="text" id="key" style="width:500px;" placeholder="过滤关键字"/></p>
 <table>
  <tr>
	<th>ID</th>
	<th>城市</th>
	<th>小区</th>
	<th>街道</th>
  </tr>
  	 #foreach($org in $list)        
        <tr class="data-tr" id="tr_$!{org.orgId}">
		<td>$!{org.orgId}</td>
		<td class="cityName" id="cityName_$!{org.orgId}">$!{org.cityName}</td>
		<td class="orgName" id="orgName_$!{org.orgId}">$!{org.orgName}</td>
		<td class="street">
			<input type="text" class="streetname" id="streetname_$!{org.orgId}" data-cityid="$!{org.cityId}" data-id="$!{org.orgId}" data-streetid="$!{org.streetId}" value="$!{org.streetShowName}" />
			<button class="btnSearch" id="btnSearch_$!{org.orgId}" data-cityid="$!{org.cityId}"  data-id="$!{org.orgId}">搜索</button>
			<button class="btnSave" id="btnSave_$!{org.orgId}"  data-cityid="$!{org.cityId}"  data-id="$!{org.orgId}">关联</button>
			<button class="btnAddStreet" id="btnAddStreet_$!{org.orgId}"  data-cityid="$!{org.cityId}"  data-id="$!{org.orgId}">添加街道</button>
		</td>
	  </tr>	  
     #end  
  </table>
  <div id="streetBox">
  	<ul id="streetList">
  	</ul>
  </div>
  
  <div id="modalBox">
    <div class="remodal" data-remodal-id="modalAddStreet" data-remodal-options="hashTracking: false, closeOnOutsideClick: false, closeOnConfirm:false">
      <div class="remodal-header">        
        <button data-remodal-action="close" class="remodal-close"></button>
        <h3>添加街道信息</h3>
      </div>
      <div class="remodal-body">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-form" >        
          <tr>
            <td class="field-label" valign="top">当前小区：</td>
            <td class="field-main">
              <span id="orgName"></span>
              <input name="orgId" id="orgId" type="hidden" value=""/>
            </td>
          </tr> 
          <tr>
            <td class="field-label" valign="top">所在区县：</td>
            <td class="field-main" valign="top">
	           <select name="countyId" id="countyId" style="width:304px;">
	           <option value="">请选择所在区县</option>
	           </select>
            </td>
          </tr>
          <tr>
            <td class="field-label" valign="top">街道名称：</td>
            <td class="field-main">	            
              <input name="streetName" type="text" id="streetName"  style="width:300px;"/>
            </td>
          </tr> 
        </table>
      </div><!-- /.remodal-body -->
      <div class="remodal-footer">
        <button id="btnCancel"  data-remodal-action="cancel" class="remodal-cancel">取消</button>
        <button id="btnOkAdd" data-goodsid="" class="remodal-confirm">添加街道</button>
        <button id="btnOkAddAndBind" data-goodsid="" class="remodal-confirm">添加街道并关联到当前小区</button>
      </div>
  </div><!-- /[data-remodal-id="modalQiang"]  -->
  
  
  </div><!-- /#modalBox -->
<script src="$!webPath/resources/libs/jquery.js"></script>
<script src="$!webPath/resources/assets/js/utils.js?v=2017-03-31_232134"></script>
<script src="$!webPath/resources/libs/remodal/remodal.min.js"></script>
<script>
var searchUrl = "/mall/app/orgstreet/streetlist.json";
var bindUrl = "/mall/app/orgstreet/bind.json";
var loadCountyUrl = "/mall/app/countylist.json";
var addStreetUrl = "/mall/app/orgstreet/add.json";

jQuery(function(){
	  window.streetModal = jQuery('[data-remodal-id=modalAddStreet]').remodal();
	
	  //过滤
	  jQuery("#key").on("keyup", function(){
		var key =  jQuery.trim($("#key").val());//去掉两头空格
		if(!key){
			$('.data-tr').show();
			return false;
		}
		$('.data-tr').hide();
		$(".orgName:contains('" + key + "')").closest('tr.data-tr').show();
	  });
	 
	  jQuery(".btnSearch").on("click", function(){
		   var _this = jQuery(this); 
		   var orgId = _this.data('id');
		   var cityId = _this.data('cityid');
		   search(orgId, cityId);
	 });//jQuery(".btnSearch").on("click"
	 
	 jQuery(".btnSave").on("click", function(){
		  var $this = $(this);
		  var orgId = $this.data('id');
	 	  var $streetInput = $("#streetname_"+orgId);
		  var streetId = $streetInput.data('streetid');
	 	  if(!streetId){
		   		alert("请选择街道");
		   		return false;
		   }
	 	 
	 	  Utils.showLoading();
		  jQuery.ajax({
		    type: "POST",
		    url:  bindUrl,
		    data: {
		    	"orgId":orgId,
		    	"streetId":streetId
		    },
		    dataType: "json",
		    success: function(data, textStatus,jqXHR){
		    	console.log("btnSave", data);
			  Utils.showLoading(false);
		      if(data.code === "100"){
		    	  alert("关联成功");			
		      } else {
		    	 alert(""+data.msg);	
		      }
		    }
		  });//ajax
	 });//jQuery(".btnSearch").on("click"
			
	 jQuery(".streetname").on("keyup", function(e){
		 if(e.keyCode == 13 ||e.keyCode == 108){//回车
			   var _this = jQuery(this); 
			   var orgId = _this.data('id');
			   var cityId = _this.data('cityid');			  
			 search(orgId, cityId);
		 }		  
	 });
	 
	 jQuery(".btnAddStreet").on("click", function(){
		   var _this = jQuery(this); 
		   var orgId = _this.data('id');
		   var cityId = _this.data('cityid');
		   var countyList = window["county_"+cityId];
		   var orgName = $("#orgName_"+orgId).text();
		   if(countyList){
			   showAddModal(orgId, orgName, cityId, countyList);
		   } else {
			   	  Utils.showLoading();
				  jQuery.ajax({
				    type: "POST",
				    url:  loadCountyUrl,
				    data: {
				    	"cityId":cityId
				    },
				    dataType: "json",
				    success: function(data, textStatus,jqXHR){
				      console.log("btnAddStreet", data);
					  Utils.showLoading(false);
				      if(data.code === "100"){
				    	  window["county_"+cityId] = countyList = data.data;
				    	  showAddModal(orgId, orgName, cityId, countyList);
				      } else {
				    	  alert("加载区县数据失败，"+data.msg);	
				      }
				    }
				  });//ajax
		   }
	 });//jQuery(".btnAddStreet")
	 	 	 
	  $('body').on("click", ".list-item", function(){
		  var $this = $(this);
		  var streetId = $this.data('id');
		  var orgId = $this.data('orgid');
	 	  var $streetInput = $("#streetname_"+orgId);
	 	  $streetInput.val($this.text());
	 	  $streetInput.attr("data-streetid", streetId).data("streetid", streetId);		  
	 	  $("#streetBox").hide(); 	 
	  });//$('body').on("click", ".list-item"
			  

	 jQuery("#btnOkAdd").on("click", function(){
		   var _this = jQuery(this); 
		   var orgId = $("#orgId").val();
		   var countyId = $("#countyId").val();
		   var streetName = $("#streetName").val();
		   if(!countyId ){
			   alert("请选择区县");
			   return false;
		   }
		   if(!streetName ){
			   alert("请输入街道名称");
			   return false;
		   }	
		   addStreet(countyId, streetName);
	 });
	 jQuery("#btnOkAddAndBind").on("click", function(){
		   var _this = jQuery(this); 
		   var orgId = $("#orgId").val();
		   var countyId = $("#countyId").val();
		   var streetName = $("#streetName").val();
		   if(!countyId ){
			   alert("请选择区县");
			   return false;
		   }
		   if(!streetName ){
			   alert("请输入街道名称");
			   return false;
		   }	
		   addStreet(countyId, streetName, orgId);
	 });
});//doc ready

function addStreet(countyId, streetName, orgId){
	Utils.showLoading();
	  jQuery.ajax({
	    type: "POST",
	    url: addStreetUrl,
	    data: {
	    	"countyId":countyId,
	    	"streetName":streetName,
	    	"orgId": orgId ? orgId : ""
	    },
	    dataType: "json",
	    success: function(data, textStatus,jqXHR){
	      console.log("addStreet", data);
		  Utils.showLoading(false);
	      if(data.code === "100"){
	    	  alert("添加成功");
	    	  if(orgId){
	    		  var streetId = data.data.streetId;
	    		  var streetName = data.data.streetName;
	    		  var countyName = data.data.countyName;
	    		  var cityName = data.data.cityName;
	    		  var text = '['+streetId+']'+cityName+'-'+countyName+'-'+streetName+'';
	    	 	  var $streetInput = $("#streetname_"+orgId);
	    	 	  $streetInput.val(text);
	    	 	  $streetInput.attr("data-streetid", streetId).data("streetid", streetId);		
	    	  }
	    	  window.streetModal.close();
	      } else {
	    	  alert(data.msg);	
	      }
	    }
	  });//ajax
}

function showAddModal(orgId, orgName, cityId, countyList){
	$("#orgName").text(orgName);
	$("#orgId").val(orgId);
	var options = [];
	for(var i in countyList){
		var county = countyList[i];
		options.push('<option class="county" value="'+county.countyId+'">'+county.countyName+'</option>');
	}
	$("#countyId .county").remove();
	$("#countyId").append(options.join(''));
	
	window.streetModal.open();
}

function search(orgId, cityId){
	var $street = $("#streetname_"+orgId);
	   var streetName = $street.val();
	   if(!streetName){
	   		alert("请输入街道名称");
	   		return false;
	   }
	   streetName = streetName.replace(/^.*-/g, "");
	   
	  Utils.showLoading();
	  jQuery.ajax({
		    type: "POST",
		    url:  searchUrl,
		    data: {
		    	"cityId":cityId,
		    	"streetName":streetName
		    },
		    dataType: "json",
		    success: function(data, textStatus,jqXHR){
		    	console.log("btnSearch", data);
		    	 Utils.showLoading(false);
		      if(data.code === "100"){
		    	  showList(orgId, data.data);		
		      } else {
		    	  alert(""+data.msg);	
		      }
		    }
	});//ajax
}
function showList(orgId, list){
	if(!list ||list.length===0){
  	  alert("没有找到匹配数据");	
		return;
	}
	var items = [];
	for(var i in list){
		var item = list[i];
		items.push('<li class="list-item" data-id="'+item.streetId+'" data-orgid="'+orgId+'">['+item.streetId+']'+item.cityName+'-'+item.countyName+'-'+item.streetName+'</li>');
	}
	
	$('#streetList').empty().append(items.join(''));

	var $streetInput = $("#streetname_"+orgId);
	var offset = $streetInput.offset();
	var top = offset.top + $streetInput.outerHeight();
	var left = offset.left;
	$("#streetBox").css({"top":top, "left":left}).slideDown(500);	
}
</script>
</body>
</html>
